<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="capacity-diction">
  <div class="header">
    <div
      [class]="{
        num: true,
        hidden: capacityDictionChart.reachTo80 < 0
      }"
    >
      <span class="symbol">{{ capacityDictionChart.reachTo80Symbol }}</span
      >&nbsp;{{ capacityDictionChart.reachTo80
      }}<span class="text">
        {{ 'common_home_to_label' | i18n
        }}<span class="warning"> 80%</span></span
      >
    </div>
    <div
      [class]="{
        num: true,
        hidden: capacityDictionChart.reachTo100 < 0
      }"
    >
      <span class="symbol">{{ capacityDictionChart.reachTo100Symbol }}</span
      >&nbsp;{{ capacityDictionChart.reachTo100
      }}<span class="text">
        {{ 'common_home_to_label' | i18n
        }}<span class="danger"> 100%</span></span
      >
    </div>
  </div>
  <div class="container">
    <capacity-diction-chart
      #capacityDictionChart
      [cardInfo]="cardInfo"
    ></capacity-diction-chart>
  </div>
</div>
